單向綁定 (v-once)
一般來說，如果我們使用 v-text 來綁定資料與畫面，那通常會是雙面綁定，資料和畫面是交互影響的，假設我們只想讓畫面只渲染一次資料後就不再變動，我們可以使用 v-once 語法，如下面程式，當 input 輸入畫面資料 text 改變時，有加 v-once 的 div 區塊不會跟著改變。
1
2
3
4
5
6
7
| <body>
<div id=app>
<input type="text" v-model="text">
<div v-text='text' v-once></div>
<div v-text='text' ></div>
</div>
</body>
|
1
2
3
4
5
6
7
8
9
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
text:'hello'
}
})
</script>
|
表達式 (Expression)
js 裡面有很多常見的表達式子，當我們把它寫進 Vue {{}} 中，它會自動幫我們執行並渲染。補充一下，我們除了聽過表達式 (Expression) 之外也聽過陳述式 (Statement)，兩者差異在於，表達式子會回傳值一個值，像是判斷兩個數字的大小，它會回傳給你 true 或 false，兩個數字相加它會回傳給你相加後數值 (好像你和別人表白，他會回應要還是不要)，而陳述式 (Statement) 就只是執行指令沒有回傳值，比如變數宣告或者 while 迴圈等。
1
2
3
4
5
6
7
8
| <body>
<div id=app>
{{number1+number2}}
{{text1+text2}}
{{number1+number2}}
{{text1.split('').reverse().join('')}}
</div>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
number1:1,
number2:2,
text1:'Hello',
text2:'Vue'
}
})
</script>
|